<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
	<h3>Login panel attachment:</h3>

	<rich:toolbar height="26px">
		<h:outputLink value="#" id="ll">
			<rich:componentControl event="click" operation="show" target="lp">
				<a4j:param name="event" value="event" noEscape="true" />
				<rich:hashParam>
					<a4j:param noEscape="true" name="top"
						value="jQuery(#{rich:element('ll')}.parentNode).offset().top + jQuery(#{rich:element('ll')}.parentNode).height()" />
					<a4j:param noEscape="true" name="left"
						value="jQuery(#{rich:element('ll')}.parentNode).offset().left" />
				</rich:hashParam>
			</rich:componentControl>
			Login</h:outputLink>
	</rich:toolbar>
	<rich:popupPanel id="lp" autosized="true" modal="false"
		moveable="false" resizeable="false">
		<h:panelGrid columns="2">
			<h:outputText value="Login" />
			<h:inputText />
			<h:outputText value="Password" />
			<h:inputText />
		</h:panelGrid>
		<h:outputLink
			onclick="#{rich:component('lp')}.hide(event); return false;"
			value="#">Login</h:outputLink>
	</rich:popupPanel>

	<h3>Search panel right-side attachment:</h3>
	<rich:toolbar height="26px" id="tb">
		<rich:toolbarGroup location="right">
			<h:outputLink value="#">
				<rich:componentControl event="click" operation="show" target="ls">
					<a4j:param name="event" value="event" noEscape="true" />
					<rich:hashParam>
						<a4j:param noEscape="true" name="top"
							value="jQuery(#{rich:element('tb')}).offset().top + jQuery(#{rich:element('tb')}).height()" />
						<a4j:param noEscape="true" name="left"
							value="jQuery(#{rich:element('tb')}).offset().left + jQuery(#{rich:element('tb')}).width() - #{rich:component('ls')}.width()" />
					</rich:hashParam>
				</rich:componentControl>
			Search</h:outputLink>
		</rich:toolbarGroup>
	</rich:toolbar>
	<rich:popupPanel header="Enter Search Terms" id="ls" autosized="true" modal="false"
		moveable="false" resizeable="false">
		<h:panelGrid columns="3">
			<h:outputText value="Search:" />
			<h:inputText />
			<h:outputLink
				onclick="#{rich:component('ls')}.hide(event); return false;"
				value="#">Search</h:outputLink>
		</h:panelGrid>
	</rich:popupPanel>
</ui:composition>